<template>
 <view class="bgpng">
  <view class="login-container">
    <view class="login-content">
      <view class="login-left">
        <image
          class="bg-image"
          :src="url('logoalpha', '', 'png')"
          mode="aspectFill"
        ></image>
        <view class="overlay"></view>
        <view class="left-content">
          <text class="welcome-text">欢迎使用</text>
          <text class="system-name"> {{ adminStore.name }} 后台管理系统</text>
          <text class="system-desc">高效 · 安全 · 专业</text>
        </view>
      </view>

      <view class="login-right">
        <view class="login-form">
          <view class="form-header">
            <view class="logo-container">
              
              <view class="logo-glow"></view>
            </view>
            <text class="title">管理员登录</text>
            <text class="subtitle">请输入您的账号信息</text>
          </view>

          <view class="form-content">
            <view class="form-item">
              <text class="iconfont icon-user"></text>
              <input
                type="text"
                v-model="formData.account"
                placeholder="请输入用户名"
                @focus="handleFocus('account')"
                @blur="handleBlur('account')"
                :class="{ active: focusField === 'account' }"
              />
            </view>

            <view class="form-item">
              <text class="iconfont icon-lock"></text>
              <input
                :type="showPassword ? 'text' : 'password'"
                v-model="formData.password"
                placeholder="请输入密码"
                @focus="handleFocus('password')"
                @blur="handleBlur('password')"
                :class="{ active: focusField === 'password' }"
              />
              <text
                class="iconfont"
                :class="showPassword ? 'icon-eye' : 'icon-eye-close'"
                @click="togglePasswordVisibility"
              ></text>
            </view>

            <button
              class="login-btn"
              @click="handleLogin"
              :disabled="loading"
              :class="{ loading: loading }"
            >
              <text v-if="!loading">登录</text>
              <view v-else class="loading-spinner"></view>
            </button>
          </view>

          <view class="form-footer">
            <text>© {{ currentYear }} {{ adminStore.name }} 版权所有</text>
          </view>
          <view class="uni-error text-center uni-my-3">
            <text>🪧建议使用PC端登录</text>
          </view>
          <view class="form-footer">
            <uni-list class="text-center text-danger legal-warning">
              <view class="warning-header">
                <text class="iconfont icon-warning"></text>
                <text class="warning-title">中华人民共和国法律警告</text>
              </view>
              <uni-list-item title="《刑事重罪通告：非法入侵计算机信息系统最高可判无期徒刑》"
              >
              （依据《中华人民共和国刑法》第二百八十五条第一款、第二款，第二百八十六条第二款规定：非法获取计算机信息系统数据、非法控制计算机信息系统，情节特别严重者，处十年以上有期徒刑直至无期徒刑）
              </uni-list-item>
              <uni-list-item title="《最高检察院通告：网络攻击致数据泄露，单位直接负责人最高可判15年》"
              >
              （依据《中华人民共和国网络安全法》第六十七条，《刑法修正案（十一）》第二百八十六条之一：单位违法所得处5倍以上10倍以下罚金，直接负责人员处五年以上十五年以下有期徒刑）
              </uni-list-item>
              <uni-list-item title="《公安部重点打击通告：组织、参与黑客攻击，构成犯罪集团最高死刑》"
              >
              （依据《中华人民共和国刑法》第二百八十七条，《最高人民法院关于办理危害计算机信息系统安全刑事案件司法解释》第二条、第四条：构成黑客犯罪集团，危害国家安全的，可处死刑）
              </uni-list-item>
              <uni-list-item title="《司法部警示：利用AI技术非法入侵，从重处罚》"
              >
              （依据《关于依法严厉打击网络黑客犯罪的指导意见》第三章第十二条，《刑法》第二百八十五条之一：利用人工智能技术实施网络攻击，从重处罚，最低刑期十年起步）
              </uni-list-item>
            </uni-list>
          </view>
        </view>
      </view>
    </view>
  </view></view>
</template>

<script setup>
import { reactive, ref, computed } from "vue";
import { useAdminStore } from "@/stores/admin";

const formData = reactive({
  account: "13800000000",
  password: "123456",
});
const loading = ref(false);
const focusField = ref("");
const showPassword = ref(false);
const adminStore = useAdminStore();
const url = $url;

const currentYear = computed(() => {
  return new Date().getFullYear();
});

const handleFocus = (field) => {
  focusField.value = field;
};

const handleBlur = () => {
  focusField.value = "";
};

const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

const handleLogin = async () => {
  if (!formData.account || !formData.password) {
    uni.showToast({
      title: "请输入用户名和密码",
      icon: "none",
    });
    return;
  }

  loading.value = true;

  try {
    const res = await uni.request({
      url: "https://fc-mp-d7d620be-76ea-43bb-a05a-d38ceb13c655.next.bspapp.com/login",
      method: "POST",
      data: {
        account: formData.account,
        password: formData.password,
      },
    });

    const { status, message, userInfo } = res.data;

    switch (status) {
      case 0:
        uni.showToast({
          title: "未注册",
          icon: "error",
        });
        break;
      case 1:
        if (userInfo.role === 0) {
          // 是管理员账号
          adminStore.setUserInfo(userInfo);
          uni.showToast({
            title: "登录成功",
            icon: "success",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/other/admin/index",
            });
          }, 1500);
        } else {
          uni.showToast({
            title: "非管理员账号",
            icon: "none",
          });
        }
        break;
      case 2:
        uni.showToast({
          title: "密码错误",
          icon: "error",
        });
        break;
    }
  } catch (error) {
    uni.showToast({
      title: "登录失败",
      icon: "none",
    });
    console.error("登录错误:", error);
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.bgpng {
  // background: url("https://epoch.jxksd.top/mo/images/ib1.jpg") no-repeat center center;

  background-size: cover;
}
.login-container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;


  .login-content {
    width: 90%;
    height: 80vh;
    display: flex;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 20rpx 80rpx rgba(0, 0, 0, 0.1);
    background-color: #fff;

    .login-left {
      flex: 1;
      position: relative;
      overflow: hidden;

      .bg-image {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          135deg,
         var(--td-brand-color) ,
          rgba(0, 41, 38, 0.9)
        );
      }

      .left-content {
        position: relative;
        z-index: 2;
        padding: 60rpx;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        .welcome-text {
          font-size: 48rpx;
          font-weight: 300;
          color: rgba(255, 255, 255, 0.8);
          margin-bottom: 20rpx;
        }

        .system-name {
          font-size: 64rpx;
          font-weight: bold;
          color: #fff;
          margin-bottom: 40rpx;
        }

        .system-desc {
          font-size: 32rpx;
          color: rgba(255, 255, 255, 0.8);
          letter-spacing: 10rpx;
        }
      }
    }

    .login-right {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40rpx;

      .login-form {
        width: 100%;
        max-width: 600rpx;
        display: flex;
        flex-direction: column;

        .form-header {
          text-align: center;
          margin-bottom: 60rpx;

          .logo-container {
            position: relative;
            width: 160rpx;
            height: 160rpx;
            margin: 0 auto 30rpx;
            
            .logo {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              box-shadow: 0 0 20rpx rgba(24, 144, 255, 0.3);
              z-index: 2;
              position: relative;
            }
            
            .logo-glow {
              position: absolute;
              top: -10rpx;
              left: -10rpx;
              right: -10rpx;
              bottom: -10rpx;
              background: radial-gradient(circle, rgba(24, 144, 255, 0.2) 0%, rgba(24, 144, 255, 0) 70%);
              border-radius: 50%;
              animation: glowPulse 2s infinite;
              z-index: 1;
            }
          }

          .title {
            font-size: 42rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
          }

          .subtitle {
            font-size: 28rpx;
            color: #999;
          }
        }

        .form-content {
          .form-item {
            position: relative;
            margin-bottom: 40rpx;
            display: flex;
            align-items: center;
            border-bottom: 2rpx solid #eee;
            padding-bottom: 20rpx;
            transition: all 0.3s;

            &:focus-within {
              border-bottom-color: #1890ff;
            }

            .iconfont {
              font-size: 40rpx;
              color: #999;
              margin-right: 20rpx;
            }

            input {
              flex: 1;
              height: 80rpx;
              font-size: 32rpx;
              color: #333;
              border: none;
              background: transparent;

              &.active {
                color: #1890ff;

                & + .iconfont {
                  color: #1890ff;
                }
              }
            }
          }

          .login-btn {
            height: 90rpx;
            background: linear-gradient(90deg, #1890ff, #096dd9);
            color: #fff;
            border: none;
            border-radius: 45rpx;
            font-size: 32rpx;
            font-weight: bold;
            margin-top: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s;
            box-shadow: 0 8rpx 30rpx rgba(24, 144, 255, 0.3);

            &:active {
              transform: translateY(2rpx);
              box-shadow: 0 4rpx 15rpx rgba(24, 144, 255, 0.2);
            }

            &.loading {
              opacity: 0.8;
            }

            .loading-spinner {
              width: 40rpx;
              height: 40rpx;
              border: 4rpx solid rgba(255, 255, 255, 0.3);
              border-top-color: #fff;
              border-radius: 50%;
              animation: spin 1s linear infinite;
            }
          }
        }

        .form-footer {
          margin-top: 60rpx;
          text-align: center;

          text {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .login-container {
    .login-content {
      flex-direction: column;
      height: auto;

      .login-left {
        height: 30vh;
        min-height: 400rpx;
      }

      .login-right {
        padding: 60rpx 40rpx;
      }
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes glowPulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

.legal-warning {
  background: linear-gradient(to right, #ff000008, #ff000015);
  border: 1px solid #ff000030;
  border-radius: 8rpx;
  padding: 20rpx;
  margin: 20rpx 0;

  .warning-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
    
    .icon-warning {
      color: #ff0000;
      font-size: 40rpx;
      margin-right: 10rpx;
    }
    
    .warning-title {
      color: #ff0000;
      font-size: 36rpx;
      font-weight: bold;
    }
  }

  :deep(.uni-list-item) {
    background: transparent;
    margin-bottom: 10rpx;
    
    .uni-list-item__content-title {
      color: #cc0000;
      font-weight: bold;
      font-size: 28rpx;
      line-height: 1.5;
    }
    
    .uni-list-item__extra-text {
      color: #666;
      font-size: 24rpx;
      line-height: 1.4;
    }
  }
}
</style>
